<template>
    <div class="parentComment-content">
        <!-- 评论区域 -->
        <div class="conment-contain">
            <el-card>
                <p>评论 {{ commentsTotal }}</p>
                <!-- 评论输入框 -->
                <el-input v-model="commentsParams.text" type="textarea" placeholder="请输入评论内容" autosize :rows="3"
                    class="comment-input"></el-input>
                <!-- 提交按钮 -->
                <p style="margin: 0;display: flex; justify-content: right;"><el-button type="primary" size="small"
                        @click="submitComment">提交评论</el-button></p>

                <!-- 已有评论列表 -->
                <div class="comment-list">
                    <div v-for="(item, index) in comments" :key="index">
                        <!-- 分割线 -->
                        <el-divider></el-divider>
                        <div class="comment-item">
                            <div class="left-avatar">
                                <img v-if="item.avatar" :src="item.avatar" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                            <div class="right-text">
                                <P style="color: red;font-size: small;">{{ item.nickname }}</P>
                                <P style="margin-bottom: 0;">{{ item.text }}</P>
                                <P style="color: #ccc;font-size: small; text-align: right;  margin: 0;">{{
                    item.comment_date }}
                                    <el-button type="text" style="margin-left: 10px;color: black"
                                        class="el-icon-s-comment" @click="sonComment(item.id)">{{
                    commentTips[item.id] || '评论' }} </el-button>
                                    <el-button type="text" style="color: black" class="el-icon-delete"
                                        @click="deleteComment(item.id)">删除</el-button>
                                </P>
                                <!-- 父评论回复区域 -->
                                <div class="sonComment-content" v-if="sonCommentsVisible[item.id]">
                                    <el-input v-model="ReplayComment[item.id]" type="textarea" placeholder="请输入回复的内容"
                                        autosize :rows="3" class="comment-input"></el-input>
                                    <p style="margin: 0;display: flex; justify-content: right;"><el-button
                                            type="primary" size="small" @click="replayComment(item.id)">回复</el-button>
                                    </p>
                                </div>
                                <!-- 子评论列表 -->
                                <div v-for="(item1, index) in item.child" :key="index">
                                    <!-- 分割线 -->
                                    <el-divider></el-divider>
                                    <div style="display: flex;">
                                        <div class="left-avatar">
                                            <img v-if="item1.avatar" :src="item1.avatar" class="avatar">
                                            <i v-else class="el-icon-user" style="font-size: 40px;border:1px solid #ccc;border-radius: 50%;margin-right: 10px;"></i>
                                        </div>
                                        <div class="right-text">
                                            <P style="color:  red;font-size: small;">{{ item1.nickname }}</P>
                                            <P style="margin-bottom: 0;">
                                                <i style="font-size: small;margin-right: 10px;color: #ccc;">@{{ item1.parentNickname }}</i>
                                                {{ item1.text }}
                                            </P>
                                            <P style="color: #ccc;font-size: small; text-align: right; margin: 0;">
                                                {{ item1.comment_date }}
                                                <el-button type="text" style="margin-left: 10px;color: black"
                                                    class="el-icon-s-comment" @click="sonComment(item1.id)">{{
                    commentTips[item1.id] || '评论' }} </el-button>
                                                <el-button type="text" style="color: black" class="el-icon-delete"
                                                    @click="deleteComment(item1.id)">删除</el-button>
                                            </P>
                                            <!-- 回复评论区域 -->
                                            <div class="sonComment-content" v-if="sonCommentsVisible[item1.id]">
                                                <el-input v-model="ReplayComment[item1.id]" type="textarea"
                                                    placeholder="请输入回复的内容" autosize :rows="3"
                                                    class="comment-input"></el-input>
                                                <p style="margin: 0;display: flex; justify-content: right;"><el-button
                                                        type="primary" size="small"
                                                        @click="replayComment(item1.id)">回复</el-button></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- 如果没有评论，显示提示信息 -->
                    <div v-if="comments.length === 0" class="no-comments">暂无评论</div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getCommentAPI, addCommentAPI, deleteCommentAPI } from '@/api/comment'
export default {
    props: {
        articleID: {//文章id
            type: String,
            required: true
        }
    },
    data() {
        return {
            localArticleID: this.articleID,//文章id
            commentsParams: {//评论参数
                articleID: '',
                text: '',
            },
            ReplayParams: {//回复评论的参数
                articleID: '',
                text: '',
                parent_comment_id: '',
            },
            comments: [],//评论列表
            commentsTotal: 0,//评论总数
            sonCommentsVisible: {}, // 使用对象来存储评论的显示状态 
            commentTips: {},//使用对象来存储评论的提示信息
            ReplayComment: {},//回复评论的文字
        }
    },
    mounted() {
        // 获取评论列表
        this.getComments()
    },
    created() {
        // 在组件创建时初始化commentTips对象  
        this.comments.forEach(comment => {
            this.$set(this.commentTips, comment.id, '评论');
        });
    },
    methods: {
        async replayComment(id) {
            this.ReplayParams.articleID = this.articleID
            this.ReplayParams.text = this.ReplayComment[id]
            this.ReplayParams.parent_comment_id = id
            const res = await addCommentAPI(this.ReplayParams)
            if (res.code === '200') {
                this.$message.success("评论成功")
            } else {
                this.$message.error(res.msg)
            }
            this.getComments()
            this.sonComment(id)
        },
        // 显示子评论
        sonComment(id) {
            if ((!this.commentTips[id]) || (this.commentTips[id] === '评论')) {
                this.commentTips[id] = "取消"
                this.$set(this.sonCommentsVisible, id, true);
            } else {
                this.ReplayComment[id] = ""
                this.commentTips[id] = "评论"
                this.$set(this.sonCommentsVisible, id, false);
            }
        },
        // 删除评论
        deleteComment(id) {
            this.$confirm('确认删除该评论?', '提示').then(async () => {
                // 调用接口删除评论
                const res = await deleteCommentAPI(id)
                if (res.code === '200') {
                    this.$message.success("删除成功")
                } else {
                    this.$message.error(res.msg)
                }
                this.getComments()
            })
        },
        // 提交评论
        async submitComment() {
            this.commentsParams.articleID = this.articleID
            const res = await addCommentAPI(this.commentsParams)
            if (res.code === '200') {
                this.$message.success("评论成功")
            } else {
                this.$message.error(res.msg)
            }
            this.getComments()
            this.commentsParams.text = ''
        },
        // 获取评论列表
        async getComments() {
            const res = await getCommentAPI(this.articleID)
            this.comments = res.data.rows
            this.commentsTotal = res.data.total
            // console.log(this.comments)
        },
    }
}
</script>

<style>
.conment-contain {
    margin-top: 10px;

    .el-divider--horizontal {
        margin: 4px 0;
    }

    .right-text {
        width: 90%
    }

    .left-avatar .avatar {
        width: 50px;
        height: 50px;
        display: block;
        border-radius: 50%;
        margin-right: 10px;
    }

    .comment-input {
        margin-bottom: 10px;
    }

    .comment-list {
        margin-top: 20px;
    }

    .comment-item {
        margin-bottom: 10px;
        display: flex;
    }

    .comment-author {
        font-weight: bold;
        margin-right: 5px;
    }

    .no-comments {
        text-align: center;
        color: #999;
    }
}
</style>
